*{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
}
img{
    display: block;
    width: 100%;
    height: 100%;
}
input{
    outline: none;
    border: none;
}
.auto-img{
    width: 100%;
    height: 100%;
}
.img-auto{
    width: 100%;
    height: 100%;
}
/* 父元素属性参考，以下仅为小电视
width: 100%;
display: flex;
justify-content: space-between; */
.bilibili-live-show{
    display: block;
    width: 268px;
    height: 225px;
    // background-color: yellow;
    .bilibili-live-show-first{
        // 电视主框
        cursor: pointer;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        width: 100%;
        height: 150px;
        .bilibili-live-show-first-bottom{
            // 电视底部
            font-size: 13px;
            // font-weight: bold;
            position: absolute;
            bottom: 0;
            background-image: linear-gradient(to top, rgba(0,0,0,0.6),rgba(255, 255, 255, 0));
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 36px;
            color: #ffffff;
            >div{
                margin-top: 8px;
                >div{
                    //底部左边
                    display: flex;
                    align-items: center;
                    //svg外框
                    >div{
                        width: 18px;
                        height: 18px;
                        margin-right: 2px;
                    }
                    margin-right: 12px;
                    &:nth-child(1){
                        margin-left: 8px;
                    }
                }
                &:nth-child(1){
                    display: flex;
                    align-items: center;
                }
                &:nth-child(2){
                    margin-right: 8px;
                }
            }
            .bilibili-live-show-first-bottom-live{
                >div{
                    &:nth-child(1){
                        display: none;
                    }
                    &:nth-child(2){
                        display: none;
                    }
                    &:nth-child(3){
                        >div{
                            width: 16px;
                            height: 16px;
                            margin-right: 2px;
                            margin-left: 8px;
                            >img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
        .bilibili-live-show-first-tag{
            visibility: hidden;
            opacity: 0;
            position: absolute;
            width: 22px;
            height: 22px;
            top: 8px;
            right: 8px;
            background-color: rgba($color: #000000, $alpha: 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            >svg{
                fill: #fff;
                width: 18px;
                height: 18px;
            }
        }
        &:hover{
            .bilibili-live-show-first-bottom:not([data-see="see"]){
                transition: .3s;
                opacity: 0;
            }
            .bilibili-live-show-first-tag:not([data-see="see"]){
                visibility: inherit;
                transition: .3s;
                opacity: 1;
            }
        }
    }
    .bilibili-live-show-second{
        margin-top: 10px;
        width: 100%;
        padding-right: 16px;
        box-sizing: border-box;
        font-size: 15px;
        >div{
            &:nth-child(1):not(.bilibili-live-show-second-live){
                cursor: pointer;
                height: 44px;
                line-height: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                >div{
                    display: inline-block;
                    width: 32px;
                    height: 16px;
                    margin-right: 5px;
                    font-size: 0;
                }
                &:hover{
                    color: #00aeec;
                }
            }
            &:nth-child(2){
                cursor: pointer;
                margin-top: 4px;
                font-size: 13px;
                color: #9499a0;
                display: flex;
                align-items: center;
                height: 16px;
                line-height: 16px;
                >span{
                    &:nth-child(1){
                        margin-right: 2px;
                        display: flex;
                        width: 16px;
                        height: 16px;
                        justify-content: center;
                        align-items: center;
                        >svg{
                            margin-top: 1px;
                        }
                    }
                    &:nth-child(3){
                        margin-left: 4px;
                    }
                }
                &:hover{
                    color: #00aeec;
                }
            }
        }
        .bilibili-live-show-second-live{
            cursor: pointer;
            height: 22px !important;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            display: flex;
            >div{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 61px;
                height: 18px;
                font-size: 0;
                color: #ff6699;
                border: 1px solid #ff6699;
                border-radius: 4px;
                box-sizing: border-box;
                line-height: 28px;
                margin-right: 5px;
                >div{
                    width: 12px;
                    height: 12px;
                    display: inline-block;
                }
                >span{
                    font-size: 12px;
                }
            }
            &:hover{
                color: #00aeec;
            }
        }
    }
    &:nth-child(3){
        .bilibili-live-show-second{
            >div{
                &:nth-child(2){
                    position: relative;
                    >span{
                        display: none;
                        &:nth-child(2){
                            display: inline-block;
                            position: absolute;
                            left: 64px;
                        }
                    }
                    &::before{
                        content: '一万点赞';
                        position: absolute;
                        left: 0;
                        padding: 0 4px;
                        margin-right: 4px;
                        display: inline-block;
                        color: #ff7f24;
                        background-color: #fff0e3;
                        border-radius: 2px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}